<template>
    <div class="incall">
        <transition 
        
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:after-enter="afterEnter"
        v-on:after-leave="afterLeave">
       
        <div class="ball" v-show="filg" ref="ball"></div>
        </transition>
        
        <!-- 轮播区 -->
        <div class="bannerimg">
            <banner :alist='banj'></banner>
        </div>
        
        <!-- 详情区 -->
        <div class="mui-card">
				<div class="mui-card-header">{{navimg.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class='price'>
                            市场价<s>{{navimg.market_price}}</s>&nbsp;销售价：<span class='now_price'>{{navimg.sell_price}}</span>
                            </p>
                            <p class="num">购买数量：<number @getnum='getnumcontent' :mse='navimg.stock_quantity'></number></p>
                            <p>
                                <mt-button type='primary' size='small'>立即购买</mt-button>
                                <mt-button type='danger' size='small' @click='inCar' ref="botton">加入购物车</mt-button>
                            </p>
					</div>
				</div>
			</div>
        <!-- 内容区 -->
        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{navimg.goods_no}}</p>
                        <p>商品情况：{{navimg.stock_quantity}}</p>
                        <p>上架时间：{{navimg.add_time | dateFormat()}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button type='primary' size='large' @click='getqwe(navimg.id)'>图文详情</mt-button>
                    <mt-button type='danger' size='large' @click='getasd(navimg.id)'>商品评论</mt-button>
                </div>
			</div>
    </div>
</template>
<script>
import banner from '../banner.vue';
import number from '../number.vue'
import { setTimeout, setInterval, clearInterval } from 'timers';
export default {
    
    data() {
        return {
            id:this.$route.params.id,
            banj:[],
            navimg:{},
            filg:false,
            numContent:1
        }
    },
    created() {
        this.getbanner(),
        this.getXiang()
    },
    methods: {
        getbanner(){
            this.$http.get('api/getthumimages/'+this.id).then(ros=>{
                
                
                if(ros.body.status==0){
                var listp=ros.body.message;
                listp.forEach(element => {
                    element.img=element.src;  
                });
                this.banj=listp;
                //  console.log(this.banj);
                
                }
              })
        },
        getXiang(){
            this.$http.get('api/goods/getinfo/'+this.id).then(xiang=>{
                // console.log(xiang);
                if(xiang.body.status==0){
               this.navimg=xiang.body.message[0]
                
                }
            })
        },
        getqwe(id){
            this.$router.push({ name: 'shopnav1', params: {id}})

        },
         getasd(id){
            this.$router.push({ name: 'shopnav2', params: {id}})

        },
        inCar(){
           this.filg=!this.filg;
               var icar={
                   id:this.id,
                   content:this.numContent,
                   price:this.navimg.sell_price,
                   selected:true
               };
            this.$store.commit("addIncar",icar)
        },
        beforeEnter(el){
           el.style.transform='translate(0,0)'
        },
        enter(el,done){
        el.offsetWidth;
         const inball=this.$refs.ball.getBoundingClientRect();
         const inout=document.getElementById('drage').getBoundingClientRect();
         let xd=inout.left-inball.left;
         let yd=inout.top-inball.top;
         el.style.transform=`translate(${xd}px, ${yd}px)`;
         el.style.transition=' all 1s ease-in-out';
       
        done()


        },
        afterEnter(el){
           setTimeout(()=>{
               this.filg=!this.filg;
           },1000)
        },
        afterLeave(el){
            el.style.transform='translate(0,0)'
        },
        getnumcontent(centent){
             this.numContent=centent;
            
             
        },

       
    },
        
     components:{
            banner,
            number
        },
        

}
</script>
<style lang="scss" scoped>
.incall{
    position: relative;
    .ball{
        position: absolute;
        top: 308px;
        left: 144px;
        background: red;
        width: 20px;
        height: 20px;
        border-radius: 50%;
       
        z-index: 99999;
       
    }
.bannerimg{
    width: 100%;
    height: 200px;

}
    .now_price{
       color:red;
       font-size: 18px;
    }
    .num{
        display: flex;
        align-items: center
    }
    .mui-card-header,.mui-card-footer{
        display: block;
        button{
            margin-top: 10px;
        }
    }
}

</style>